
import React, { useState, useContext } from 'react'
import cont from '../assets/js/cont'
import detailBuild from '../assets/css/detailBuild.module.css'
import { Modal, Switch } from 'antd';
import axios from '../axios/index';

export default function DetailBuild(props) {
    let { item } = props
    let act = useContext(cont);
    console.log(act.item);
    let [n, setN] = useState(1)
    let [floor, setFloor] = useState(0)
    const [isModalOpen, setIsModalOpen] = useState(false);
    let [id, setId] = useState(0)

    function getImg(url) {
        return new URL(url, import.meta.url).href
    }

    function NumberList(number) {
        const items = Array.from({ length: number }, (_, index) => index + 1); return items
    }

    const handleOk = () => {
        setIsModalOpen(false);

        axios.delete('/api/space/del', {
            params: {
                id: item.id
            }
        }).then((res) => {
            act.getData()
        })
        act.close()
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };

    let deleteBuild = () => {
        setIsModalOpen(true)
    }

    return (
        <div className={detailBuild.cover}>
            <img src={getImg('../assets/images/close.png')} alt="" onClick={() => {
                act.close()
            }} />
            <div className={detailBuild.detail} >
                <div className={detailBuild.head} style={{
                    paddingBottom: 20,
                    borderBottom: '1px solid #DBDEE3 '
                }}>
                    <span>{item.build}{item.floor}{item.name}  &nbsp;&nbsp;&nbsp;&nbsp; <Switch checkedChildren="上架中" unCheckedChildren="下架中" disabled defaultValue={item.state} onChange={(e) => {
                        console.log(e);

                    }} /></span>

                    <div className={detailBuild.action}>
                        <div style={{
                            cursor: 'pointer'
                        }} className={detailBuild.edit}>编辑</div>
                        <div style={{
                            cursor: 'pointer'
                        }} onClick={() => { deleteBuild() }}>删除</div>
                    </div>
                </div>
                <div style={{
                    marginTop: 20,
                    display: 'flex',
                }}>
                    <div style={{
                        width: 200
                    }}>
                        <div style={{
                            fontSize: 12,
                            color: ' #9FA2AD'
                        }}>面积</div>
                        <div style={{
                            fontSize: 16,
                            color: '#000000'
                        }}>{item.area}</div>
                    </div>
                    <div style={{
                        width: 200
                    }}>
                        <div style={{
                            fontSize: 12,
                            color: ' #9FA2AD'
                        }}>装修</div>
                        <div style={{
                            fontSize: 16,
                            color: '#000000'
                        }}>{item.decoration}</div>
                    </div>
                    <div style={{
                        width: 200
                    }}>
                        <div style={{
                            fontSize: 12,
                            color: ' #9FA2AD'
                        }}>朝向</div>
                        <div style={{
                            fontSize: 16,
                            color: '#000000'
                        }}>{item.face}</div>
                    </div>
                </div>
                <div style={{
                    marginTop: 20,
                }}>
                    <div style={{
                        fontSize: 12,
                        color: ' #9FA2AD',
                        marginBottom: 10
                    }}>空间备注</div>
                    <div style={{
                        marginBottom: 10,
                        fontSize: 14
                    }}>{item.info}</div>
                </div>
                <div style={{
                    marginTop: 20,
                    padding: '20px 0',
                    borderBottom: '1px dotted #DBDEE3'
                }}>
                    <span style={{
                        fontSize: 12,
                        color: ' #9FA2AD'
                    }}>创建人：{item.creName}</span>
                    <span style={{
                        fontSize: 12,
                        color: ' #9FA2AD'
                    }}>创建时间：{item.creTime}</span>
                </div>
                <div className={detailBuild.info}>
                    <div className={n == 1 ? detailBuild.infoAction : ''} onClick={() => {
                        setN(1)
                    }}>定价</div>
                    <div className={n == 2 ? detailBuild.infoAction : ''} onClick={() => {
                        setN(2)
                    }}>租控</div>
                    <div className={n == 3 ? detailBuild.infoAction : ''} onClick={() => {
                        setN(3)
                    }}>租约（8）</div>
                    <div className={n == 4 ? detailBuild.infoAction : ''} onClick={() => {
                        setN(4)
                    }}>账单（6）</div>
                </div>
                <div style={{
                    height: 500,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    textAlign: 'center'

                }}>
                    <div>
                        <img src={getImg('../assets/images/weitu.png')} style={{
                            width: 290,
                            height: 190
                        }} alt="" />
                        <div>即将上线~</div>
                    </div>
                </div>
            </div>
            <Modal title="此操作是不可恢复的！" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
                okText="确认"
                cancelText="取消"
            >
                <p>您确认要执行此删除操作吗?</p>
            </Modal>
        </div>
    )
}
